<!-- 用户参与活动管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{searchData = {};vdata.startEndTime = null;}" searchConditionNum="6">
        <a-form-item class="table-search-item" label="发起人">
          <a-input v-model:value="searchData['userName']" label="发起人" :placeholder="'请输入发起人'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="资源类型">
          <a-select v-model:value="searchData['resourceType']" :placeholder="'请选择资源类型'">
            <a-select-option :value="'MCH'">商户信息数据</a-select-option>
            <a-select-option :value="'AGENT'">机构信息数据</a-select-option>
            <a-select-option :value="'ACTIVITY'">活动数据</a-select-option>
            <a-select-option :value="'FANS'">小程序用户数据</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item" label="资源名称">
          <a-input v-model:value="searchData['fileName']" label="资源名称" :placeholder="'请输入资源名称'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="下载编号">
          <a-input v-model:value="searchData['serialNo']" label="商户名" :placeholder="'请输入下载编号'" />
        </a-form-item>
        <a-form-item class="table-search-item" style="width: 350px;" label="发起时间">
          <a-range-picker v-model:value="vdata.startEndTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item class="table-search-item" label="状态">
          <a-select v-model:value="searchData['status']" :placeholder="'请选择状态'">
            <a-select-option :value="'PENDING'">等待执行</a-select-option>
            <a-select-option :value="'PROCESSING'">正在处理</a-select-option>
            <a-select-option :value="'SUCCESS'">执行成功</a-select-option>
            <a-select-option :value="'FAILED'">执行失败</a-select-option>
            <a-select-option :value="'CANCELLED'">已取消</a-select-option>
          </a-select>
        </a-form-item>
        <!-- <GzTextUp v-model:value="searchData['phone']" placeholder="资源名称" />
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['state']" :placeholder="'资源类型'">
            <a-select-option :value="0">转介码数据</a-select-option>
            <a-select-option :value="1">活动数据</a-select-option>
            <a-select-option :value="2">商户信息数据</a-select-option>
            <a-select-option :value="3">机构信息数据</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['state']" :placeholder="'状态'">
            <a-select-option :value="0">生成中</a-select-option>
            <a-select-option :value="1">生成失败</a-select-option>
          </a-select>
        </a-form-item>-->
      </GzSearchForm> 
  
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'resourceType'">
            <template v-if="record.resourceType === 'MCH'">商户信息数据</template>
            <template v-if="record.resourceType === 'AGENT'">机构信息数据</template>
            <template v-if="record.resourceType === 'ACTIVITY'">活动数据</template>
            <template v-if="record.resourceType === 'FANS'">小程序用户数据</template>
          </template>

          <!-- <a @click="lookChnnelCode(record)">
              <b>{{ record.channelName }}</b>
            </a> -->
          <template v-if="$access('ENT_DOWN_INFO_RES') && column.key === 'fileName'">
            <a :href="record?.downloadUrl">
              <b>{{ record.fileName }}</b>
            </a>
          </template>

          <template v-if="column.key === 'status'">
            <template v-if="record.status === 'PENDING'">
              <div style="display: flex;align-items: center;">
                <exclamation-circle-outlined style="color: #0671EB; margin-right: 8px;" />
                <span style="color:#0671EB;">等待执行</span>
              </div>
            </template>
            <template v-if="record.status === 'PROCESSING'">
              <div style="display: flex;align-items: center;">
                <sync-outlined style="color: #666666; margin-right: 8px;" />
                <span style="color:#666666;">正在处理</span>
              </div>
            </template>
            <template v-if="record.status === 'SUCCESS'">
              <div style="display: flex; align-items: center;">
                <check-circle-outlined style="color: #52C41A; margin-right: 8px;" />
                <span style="color: #52C41A;">执行成功</span>
              </div>
            </template>
            <template v-if="record.status === 'FAILED'">
              <div style="display: flex;align-items: center;">
                <close-circle-outlined style="color: #FF4D4F; margin-right: 8px;" />
                <span>
                  <span style="color:#FF4D4F;">执行失败</span>
                  <a-tooltip placement="right">
                    <template #title>
                      <span>{{ record.errorMsg }}</span>
                    </template>
                    <QuestionCircleOutlined style="margin-left: 4px;" />
                  </a-tooltip>
                </span>
              </div>
            </template>
            <template v-if="record.status === 'CANCELLED'">
              <div style="display: flex;align-items: center;">
                <minus-circle-outlined style="color: #666666; margin-right: 8px;" />
                <span style="color:#666666;">已取消</span>
              </div>
            </template>
          </template>
  
          <template v-if="column.key === 'operation'" />
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>
  
  <script lang="ts" setup>
  import {$apiExportTask} from '@/api/DownLoad/index'
  import { ref, reactive, getCurrentInstance } from 'vue'
  const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
  const gzThreeRef = ref()
  const infoTableRef = ref()
  let tableColumns = reactive([
    { key: 'userName', title: '发起人',dataIndex: 'userName',fixed: 'left', width: 140 },
    { key: 'resourceType', title: '资源类型',dataIndex: 'resourceType', width: 140 },
    { key: 'fileName', title: '资源名称',dataIndex: 'fileName', width: 140 },
    { key: 'serialNo', title: '下载编号',dataIndex: 'serialNo', width: 200 },
    { key: 'startTime', title: '发起时间',dataIndex: 'startTime', width: 180 },
    { key: 'completedTime', title: '生成时间',dataIndex: 'completedTime', width: 180 },
    { key: 'status', title: '状态',dataIndex: 'status', width: 180 },
    // { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
  ])

  const vdata:any = reactive({
  startEndTime:null,
})
  
  const searchData:any = ref({})
  // 请求table接口数据
  function reqTableDataFunc(params: any) {
    params.startTime = vdata.startEndTime ? vdata.startEndTime[0] : ''
    params.endTime = vdata.startEndTime ? vdata.startEndTime[1] : ''
    return $apiExportTask({ ...params,})
  }
  
  function searchFunc() {
    infoTableRef.value.refTable(true)
  }
  
  /* 查询时间更改 */
  function queryTimeChange(dates:  [string, string], dateStrings: [string, string]){
    if(dates){
      searchData.value['sTime']=dateStrings[0]
      searchData.value['eTime']=dateStrings[1]
    }else{
      delete searchData.value['sTime']
      delete searchData.value['eTime']
    }
  }
  
  </script>
  